<template>
	<el-table
		ref="baseTable"
		:cell-style="{ 'text-align': 'left' }"
		stripe
		:data="optionAll.data"
		border
		style="width: 100%"
		:height="optionAll.height || autoHeight"
		@selection-change="handleSelectionChange"
	>
		<el-table-column
			v-if="optionAll.select"
			type="selection"
			width="50"
		></el-table-column>
		<el-table-column v-if="optionAll.radio" width="50" label="选择">
			<template v-slot:default="scope">
				<el-radio
					v-model="currentRadio"
					:label="scope.row"
					@change="radioChange(scope.row)"
				>
					&nbsp;
				</el-radio>
			</template>
		</el-table-column>
		<el-table-column
			v-if="optionAll.index"
			type="index"
			label="序号"
			align="center"
			flex
			width="60"
		></el-table-column>
		<template v-for="column in optionAll.column">
			<template v-if="!column.hide">
				<RecursionTableColumn
					:key="column.label"
					:col="column"
					:params="{ cellEmptyText: optionAll.cellEmptyText }"
				></RecursionTableColumn>
			</template>
		</template>
		<template v-if="optionAll.menu">
			<el-table-column
				fixed="right"
				:label="optionAll.menuText || '操作'"
				align="center"
				:width="optionAll.menuWidth || 150"
			>
				<template v-slot:default="scope">
					<el-button
						type="text"
						v-for="menu in optionAll.menuList"
						:key="menu.prop"
						@click="menuClick(menu, scope)"
					></el-button>
				</template>
			</el-table-column>
		</template>
	</el-table>
</template>

<script setup>
import { computed, ref } from "vue";

import RecursionTableColumn from "./RecursionTableColumn.vue";
// import BasePagination from '../BasePagination.vue'

const multipleSelect = ref([]);
const currentRadio = ref("");
// const emits = defineEmits([
//   "update:page",
//   "search",
//   "resetSearch",
//   "pageChange"
// ]);

const props = defineProps({
	autoHeight: { type: Number, default: null },
	loading: { type: Boolean, default: false },
	optionAll: { type: Object, required: true },
	search: { type: Object, default: () => ({}) },
	ctrl: { type: Object, default: () => ({}) },
	page: {
		type: Object,
		default: () => ({ currentPage: 1, pageSize: 10, total: 0 }),
		validator(value) {
			if (!value) return false;
			if (value.currentPage && value.pageSize && value.total !== undefined) {
				return true;
			}
			return false;
		}
	}
});

//选择
const handleSelectionChange = (rows) => {
	this.multipleSelect.value = rows;
};
//单选
const radioChange = (row) => {
	console.log(row, "row");
};
//操作
const menuClick = (menu, scope) => {
	ctrl[menu.prop + "Click"](scope, menu);
};
</script>

<style></style>
